
import React, { useEffect, useState,useRef } from 'react';
import { Button, Tree, Form, Input,message } from 'antd';
import { getrouterList,getroleOne } from '../../reques';
import {useNavigate,useParams} from 'react-router-dom'

const { TreeNode } = Tree;


const Edit = () => {
  const {id}=useParams()

  const myForm = useRef()

const mynavigate=useNavigate()
    //定义存储列表数据的空数组
    const [rolelist, setrolelist] = useState([])

    //定义存放级层菜单栏的空数组
    const [tableData, setTableData] = useState([])
    useEffect(() => {
        getrouterList().then(res => {
            // console.log(res, "role")

            //将接受到的权限数据map
            let roleData = res.data.data.map(item => {
                //筛选pid的一级菜单
                let parents = item.auths.filter(v => v.pid == 0)
                // console.log(parents,'一级')

                //将一级菜单map根据一级的pid筛选二级
                parents = parents.map(a => {
                    //将筛选到的pid匹配传入子数组
                    a.children = item.auths.filter(b => b.pid == a.id)
                    return a
                }
                )
                item.authTree = parents
                return item

            })
            setTableData(roleData)
           setrolelist(res.data.data[0].authTree)
        })

        getroleOne(id).then(res=>{
          console.log(res.data.data.role,'one')
          myForm.current.setFieldsValue({
             name: res.data.data.role
          }
          )
        })
    }, [])
     console.log( myForm.current,1111)

    // console.log(recursionRender(tableData))


    // 定义数组接收选中的树
    const [checkedKeys, setCheckedKeys] = useState([])

    const onFinish = (values) => {
        console.log('Success:', values);
        
      
    };
    //  const onselect = (checkedKeys, e) => {
    //     console.log(checkedKeys);
    //     // console.log(e,88888)
    //     let checkedArr = []
    //     // 将半选和全选合并在一起   concat拼接     e.halfCheckedKeys我选择的权限
    //     checkedArr = checkedArr.concat(checkedKeys, e.halfCheckedKeys)
    //     setCheckedKeys(checkedArr)
    // }


    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div>
            <Form
            ref={myForm}
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="角色"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item label="权限"
                    name="auth">
                    <Tree checkable 
                    // onCheck={onselect}
                    >
                         {rolelist.map(item=>{
                            return (
                                 <TreeNode title={item.name} key={item.id} >
                                    {
                                        item.children.map(child=>{
                                            return <TreeNode title={child.name} key={child.id} />
                                        })
                                    }
                            </TreeNode>
                            )
                        })}
                    </Tree>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        修改
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
export default Edit;